<script>
import { getOrderList } from '@/api/publish'
export default {
	data() {
		return {
			tabsData: [this.$t('全部'), this.$t('大件'), this.$t('小件')],
			tabIndex: 0,
			radiovalue: '',
			orderIndex: 0,
			checked_ids: {},
			orderList: [],
			goods_type: "" //0大 1小
		}
	},
	onLoad() {

	},
	created() {
		this.getOrderList()
	},
	methods: {
		async getOrderList() {
			const res = await getOrderList({
				user_id: uni.getStorageSync('user_id'),
				goods_type: this.goods_type
			})
			if (res.data.code == 200) {
				this.orderList = res.data.data.data
			}
		},
		clickTabs(index) {
			this.tabIndex = index
			if (index == 0) {
				this.goods_type = ""
			} else if (index == 1) {
				this.goods_type = 0
			} else if (index == 2) {
				this.goods_type = 1
			}
			this.checked_ids = {}
			this.getOrderList()
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
		check(index) {
			this.$set(this.checked_ids, index, this.checked_ids[index] !== undefined ? !this.checked_ids[index] : true)
		},
		checkAll() {
			//未全选
			const state = Object.values(this.checked_ids).filter(item => item).length != this.orderList.length
			this.orderList.forEach((item, index) => {
				this.$set(this.checked_ids, item.id, state)
			});
		},
		reset() {
			this.checked_ids = {}
			this.getOrderList()
		},
		submit() {
			if (Object.values(this.checked_ids).filter(item => item).length == 0) {
				this.toast("请选择订单")
				return
			}
			console.log(this.checked_ids)
			this.$emit('confirm', Object.entries(this.checked_ids).filter(([key, value]) => value).map(([key, value]) => key))
		}
	}
}
</script>

<template>
	<view class="flex flex-col h-full" style="align-items: stretch;">
		<!-- <div style="height: 50rpx;background:#fff"></div>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('关联订单')}}
			</div> -->
		<view class="order_tabs">
			<view class="item" v-for="(item, index) in tabsData" :class="tabIndex == index ? 'hover' : ''" :key="index"
				@click="clickTabs(index)">
				{{ item }}
			</view>
		</view>

		<view class="order_list flex-1" style="overflow-y: auto;">
			<view class="order_item" :class="checked_ids[item.id] ? 'hover' : ''" v-for="(item, index) in orderList"
				:key="index" @click="check(item.id)">
				<view class="ico_xuan">
					{{$t('已选')}}
				</view>
				<view class="title">
					{{ item.id }}
					{{$t('货物信息')}}:<text>{{ get(item, "goods_info.title") }}/{{ get(item, "goods_info.goods_weight") }}{{$t('吨')}}/{{
						get(item, "goods_info.goods_volume") }}{{$t('立方米')}}/{{ get(item, "goods_info.package.title") }}</text>
				</view>
				<view class="order_info">
					<view class="info_tit">
						<view class="time">
							{{$t('接单时间')}}：{{ item.create_at }}
						</view>
						<view class="type">
							{{ item.goods_type === 0 ? '大件' : '小件' }}-{{ item.demand.split(',').map(d => {
								switch (d) {
									case '1': return $t('运输');
									case '2': return '报关';
									case '3': return '转关';
									case '4': return '清关';
									default: return '';
								}
							}).join('、') }}
						</view>
					</view>
					<view class="info_city">
						<view class="city_item">
							<flag class="ico" :country="get(item, 'departure.area_info.country')" />
							<view class="text">
								{{ get(item, "departure.area_info.country") == 0 ? '中国' : $t('俄罗斯') }}
							</view>
						</view>
						<view class="line">
							<view class="name">
								{{$t('途经')}} {{ item.transfer_count }}
							</view>
							<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
						</view>
						<view class="city_item">
							<flag class="ico" :country="get(item, 'reach.area_info.country')" />
							<view class="text">
								{{ get(item, "reach.area_info.country") == 0 ? '中国' : $t('俄罗斯') }}
							</view>
						</view>
					</view>
					<view class="info_city_text">
						<view class="text">
							{{ get(item, "departure.area_info.mergename") }}
						</view>
						<view class="text">
							{{ get(item, "reach.area_info.mergename") }}
						</view>
					</view>
				</view>

				<view class="order_btn" v-if="!checked_ids[item.id]">
					{{$t('选择')}}
				</view>
			</view>

			<div class="mt-50">
				<u-empty v-if="orderList.length == 0" textSize="32rpx" iconSize="100rpx" :text="$t('暂无数据')"></u-empty>
			</div>

			<div style="height: 300rpx;"></div>
		</view>

		<view class="footer_none"></view>
		<view class="footer_order" v-if="orderList.length > 0">
			<div class="flex">
				<view class="reload" @click="checkAll()">
					<image class="w-30 mr-10"
						v-if="Object.values(checked_ids).filter(item => item).length != orderList.length"
						src="/static/icon/checkbox.png" mode="widthFix"></image>
					<image class="w-30 mr-10" v-else src="/static/icon/checkbox-s.png" mode="widthFix"></image>
					<view class="text">{{$t('全选')}}</view>
				</view>
				<view class="reload ml-34" @click="reset">
					<image class="w-30 mr-10" src="/static/icon/reset.png" mode="widthFix"></image>
					<view class="text">{{$t('重置')}}</view>
				</view>
			</div>
			<view class="btn_blue" @click="submit">
				{{$t('确认关联')}}
			</view>
		</view>

	</view>
</template>



<style lang="scss">
.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background: #fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.footer_order {
	position: fixed;
	left: 0;
	bottom: -10rpx;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.reload {
		flex-shrink: 0;
		display: flex;
		align-items: center;

		.text {
			color: #8C8C8C;
			font-size: 28rpx;
			line-height: 28rpx;
			padding-left: 6rpx;
		}
	}

	.btn_blue {
		flex-shrink: 0;
		width: 310rpx;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-left: 34rpx;
	}
}

.order_list {
	padding: 0 30rpx;

	.order_item {
		background: #fff;
		border-radius: 26rpx;
		margin-top: 20rpx;
		padding: 0 20rpx 20rpx;
		position: relative;
		overflow: hidden;
		border: 2rpx solid transparent;

		&.hover {
			border: 2rpx solid #278AFF;

			.ico_xuan {
				display: block;
			}
		}

		.ico_xuan {
			display: none;
			position: absolute;
			top: 0;
			right: -4rpx;
			width: 139rpx;
			height: 38rpx;
			line-height: 38rpx;
			text-align: center;
			color: #fff;
			background: url('/static/img/ico_bg2.png') no-repeat;
			background-size: 100% 100%;
			font-size: 24rpx;
			box-sizing: border-box;
			padding-left: 10rpx;
		}

		.order_btn {
			width: 100%;
			height: 70rpx;
			border-radius: 40px;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 70rpx;
			text-align: center;
			margin-top: 16rpx;
		}

		.order_info {
			border-radius: 18rpx;
			background: linear-gradient(90deg, #EDFAFF 0%, #EDFAFF 100%);
			padding: 25rpx 20rpx;

			.info_city_text {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #666;
				font-size: 22rpx;
				line-height: 30rpx;
				margin-top: 15rpx;
			}

			.info_city {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 25rpx;

				.line {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding-top: 4rpx;

					.name {
						color: #278AFF;
						font-size: 26rpx;
						font-weight: 500;
						line-height: 26rpx;
					}

					.ico {
						width: 160rpx;
					}
				}

				.city_item {
					flex-shrink: 0;
					display: flex;
					align-items: center;

					.ico {
						width: 48rpx;
						height: 34rpx;
						margin-right: 10rpx;
					}

					.info {
						color: #666;
						font-size: 22rpx;
						line-height: 30rpx;
						margin-top: 20rpx;
					}

					.text {
						font-size: 27rpx;
						color: #1D1D1D;
						font-weight: 400;
					}
				}

			}

			.info_tit {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time {
					color: #535353;
					font-size: 24rpx;
					line-height: 30rpx;
				}

				.type {
					color: #333;
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}
		}

		.title {
			height: 80rpx;
			line-height: 80rpx;
			overflow: hidden;
			color: #666;
			font-size: 24rpx;
			padding: 0 10rpx;

			text {
				color: #333333;
				padding-left: 10rpx;
			}
		}
	}
}

.order_tabs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 86rpx;
	background: #fff;
	padding: 0 100rpx;
	border-top: 1rpx solid #f5f5f5;

	.item {
		color: #8C8C8C;
		font-size: 28rpx;
		line-height: 86rpx;
		position: relative;

		&.hover {
			color: #278AFF;
			font-weight: 600;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 13rpx;
				width: 50rpx;
				height: 4rpx;
				border-radius: 50rpx;
				background: #278AFF;
				margin-left: -25rpx;
			}
		}
	}
}

page {
	background-color: #F6F7FB;
}
</style>
